Axios基本使用

1.1 常用方法

1.2 跨域

在进行“苍穹外卖”或类似的 Java 后端与前端分离项目开发时，Axios 跨域问题是前后端对接的首个“拦路虎”。

跨域问题的本质不是 Axios 的错，而是浏览器的**同源策略（Same-Origin Policy）**在起作用。

---

1. 什么是跨域（CORS）？

当你的前端项目（比如运行在 localhost:8080）通过 Axios 向后端接口（比如运行在 localhost:3000）发送请求时，如果以下三个要素中有一个不同，就会产生跨域：

1. 协议（http vs https）
2. 域名（localhost vs 127.0.0.1 或其他域名）
3. 端口（8080 vs 3000）

注意： 跨域时，请求其实已经发到了后端，后端也处理并返回了结果，但浏览器拦截了响应，不让你的 JavaScript 代码拿到数据。

---

2. 实战解决方案（推荐顺序）

作为 Java 程序员，你通常有三种方式来解决这个问题：

A. 后端配置（最彻底：CORS 协议）

在 Spring Boot 中，你可以通过配置类允许特定的源访问。这在你的 sky-server 项目中非常常见。

实战代码：

Java

@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOrigins("*")
                // 是否允许证书（Cookie）
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 跨域允许时间
                .maxAge(3600);
    }
}

B. Nginx 反向代理（生产环境常用）

通过 Nginx 将前端请求和后端接口统一转发到同一个域名和端口下。

• 前端访问：http://localhost/api/login
• Nginx 拦截 /api，转发给后端的 3000 端口。
• 对于浏览器来说，它只看到了 localhost 这一个源，因此不存在跨域。

C. 前端配置代理（开发环境常用）

如果你使用的是 Vue 或 React，可以在脚手架配置文件（如 vue.config.js）中配置 proxy：

JavaScript

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

---

3. Axios 预检请求（Preflight Request）

当你发送“复杂请求”（如 PUT、DELETE 或带有自定义 Header 的 POST）时，Axios 会先发送一个 OPTIONS 请求给后端。

• 目的： 询问服务器是否允许跨域。
• 常见坑点： 如果你的后端拦截器（Interceptor）没有放行 OPTIONS 方法，或者没有给 OPTIONS 请求返回 200 OK，Axios 就会报错，导致正式请求发不出去。

排查建议： 在浏览器控制台的 Network 面板查看，如果看到一个状态码为 401 或 403 的 OPTIONS 请求，说明拦截器需要对 OPTIONS 方法做特殊处理（直接放行）。

---

4. 总结

方案	原理	适用场景
CORS	后端在响应头加上 Access-Control-Allow-Origin	开发与生产均可，配置简单
Nginx	改变物理链路，实现同源	生产环境首选，性能高
JSONP	利用 <script> 标签不跨域的特性	已过时，仅支持 GET，不推荐

既然你正在处理 OssConfiguration 相关的报错，用户是否需要在文件上传（OSS）的场景下，了解如何配置阿里云 OSS 桶（Bucket）的跨域访问权限？（通常前端直接上传文件到 OSS 也需要单独配置跨域）。